<template>
  <section class="statisticsContainer">
    <div class="statisticsBox">
      <div class="leftBox">
        <!--统计数字-->
        <div class="leftOne boxShadow flex align-center">
          <LeftOne/>
        </div>
        <!--统计各模型调用次数柱状图及占比图-->
        <div class="leftTwo boxShadow">
          <div style="height: 100%; width: 60%; float: left;">
            <LeftTwoOne/>
          </div>
          <div style="height: 100%; width: 40%; float: right;">
            <LeftTwoTwo/>
          </div>
        </div>
        <!--统计各模型日调用次数折线图-->
        <div class="leftThree boxShadow" style="background: #e0fffc;">
          <LeftThree/>
        </div>
      </div>
      <div class="rightBox">
        <div class="rightTop">
<!--          &lt;!&ndash;统计各模型收藏数柱状图&ndash;&gt;-->
<!--          <div class="rightTopOne boxShadow" style="background: #feede0;">-->
<!--            <RightTopOne/>-->
<!--          </div>-->
          <!--统计各模型评论次数柱状图-->
          <div class="rightTopTwo boxShadow" style="background: #f6ffcf; width: 100%;">
            <RightTopTwo/>
          </div>
        </div>
        <div class="rightSub">
          <!--统计各模型申请次数及各模型实时数据滚动列表-->
          <div class="rightSubOne boxShadow">
            <div style="height: 100%; width: 40%; float: left;">
              <RightSubOneOne/>
            </div>
            <div style="height: 100%; width: 60%; float: right; position: relative;">
              <RightSubOneTwo/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import LeftOne from "./model/LeftOne";
import LeftTwoOne from "./model/LeftTwoOne";
import LeftTwoTwo from "./model/LeftTwoTwo";
import LeftThree from "./model/LeftThree";
import RightTopOne from "./model/RightTopOne";
import RightTopTwo from "./model/RightTopTwo";
import RightSubOneOne from "./model/RightSubOneOne";
import RightSubOneTwo from "./model/RightSubOneTwo";
import {mapState} from "vuex";

export default {
  name: '',
  props: {},
  components: {
    LeftOne,
    LeftTwoOne,
    LeftTwoTwo,
    LeftThree,
    RightTopOne,
    RightTopTwo,
    RightSubOneOne,
    RightSubOneTwo
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
    }),
  },
  watch: {},
  created() {
    this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})
  },
  mounted() {
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.boxShadow {
  background: #fff;
  box-shadow: 0 0 10px #f1f1f1;
  border-radius: 8px;
}

.statisticsContainer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: #f1f1f1;

  .statisticsBox {
    height: 100%;
    overflow: hidden;

    .leftBox {
      height: 100%;
      width: calc(50% - 8px);
      float: left;

      .leftOne {
        height: 16%;
      }

      .leftTwo {
        height: calc(42% - 16px);
        margin-top: 16px;
      }

      .leftThree {
        height: calc(42% - 16px);
        margin-top: 16px;
      }
    }

    .rightBox {
      height: 100%;
      width: calc(50% - 8px);
      float: right;

      .rightTop {
        height: calc(37% + 8px);
        overflow: hidden;

        .rightTopOne {
          height: 100%;
          width: calc(50% - 8px);
          float: left;
        }

        .rightTopTwo {
          height: 100%;
          width: calc(50% - 8px);
          float: right;
        }
      }

      .rightSub {
        height: calc(63% - 24px);
        margin-top: 16px;

        .rightSubOne {
          height: 100%;
        }
      }
    }
  }
}
</style>
